<template>
  <div id="dept">
    <el-dialog title="设置显示字段" :visible.sync="colSetVisible" width="80%" :close-on-click-modal="false" :close-on-press-escape="false">
      <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
      <div style="margin: 15px 0;"></div>
      <el-checkbox-group v-model="mycols" @change="handleCheckedColsChange">
        <el-checkbox v-for="col in cols" :label="col" :key="col" style="padding-bottom:20px; width:200px">{{col}}</el-checkbox>
      </el-checkbox-group>
    </el-dialog>
    <el-dialog title="人员信息详情" :visible.sync="personDetailVisible" width="80%" top="20px" :close-on-click-modal="false" :close-on-press-escape="false">
      <personInfo v-bind:personId='personId'></personInfo>
    </el-dialog>
    <div style="height:24px;overflow:hidden;float:right;padding-top:8px;font-size:var(--size14) !important;font-family:'宋体'">
      <i class="el-icon-success" style="color:#090" v-if="updateLogText.Status==='ok'"></i>
      <i class="el-icon-error" style="color:#f00" v-if="updateLogText.Status==='error'"></i>
       {{updateLogText.Message}}
    </div>
    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: '/' }">系统首页</el-breadcrumb-item>
      <el-breadcrumb-item>基础信息</el-breadcrumb-item>
      <el-breadcrumb-item><b>干部信息</b></el-breadcrumb-item>
    </el-breadcrumb>
    <div id="tree" v-show="treeShow">
      <el-scrollbar style="height: calc(100% + 16px);">
      <el-tabs id="treetabs" v-model="treeActiveName" stretch type="card">
        <el-tab-pane label="机构树" name="jigou">
          <el-tree accordion node-key="id" @current-change="testf" @node-click="handleNodeClick" :expand-on-click-node="false" :render-content="renderContent" class="filter-tree" :data="treedata" :filter-node-method="filterNode" ref="tree2" empty-text="正在加载..." lazy :load="loadNode1" :default-expanded-keys="defaultkey" :props="myprops"></el-tree>
        </el-tab-pane>
        <el-tab-pane label="查询" name="chaxun">
          <el-form :model="filters" style="padding-top:10px">
            <el-form-item label="单位" label-width="90px">
              <el-input placeholder="输入单位关键字" v-model="filters.deptname" class="treeinputperson" @keyup.enter.native="searchPerson"></el-input>
            </el-form-item>
            <el-form-item label="姓名" label-width="90px">
              <el-input placeholder="输入姓名" v-model="filters.personname" class="treeinputperson" @keyup.enter.native="searchPerson"></el-input>
            </el-form-item>
            <el-form-item label="身份证" label-width="90px">
              <el-input placeholder="输入身份证号" v-model="filters.idcard" class="treeinputperson" @keyup.enter.native="searchPerson"></el-input>
            </el-form-item>

            <el-form-item label-width="90px">
              <el-checkbox v-model="ageItemChecked" @change="showAgeItem">更多条件</el-checkbox>
            </el-form-item>
          <div  v-show="AgeItemVisible" ref="AgeItem">
            <!-- <el-form-item label="是否党员" label-width="90px">
              <el-select v-model="filters.AgeFrom" placeholder="请选择" style="width:100px;">
                <el-option :value="null">全部</el-option>
                <el-option :value="'是'">是</el-option>
                <el-option :value="'否'">否</el-option>
              </el-select>
            </el-form-item> -->
            <el-form-item label="开始年龄" label-width="90px">
              <el-input-number v-model="filters.AgeFrom" :min="0" :max="200" label="开始年龄" style="width:150px" @keyup.enter.native="searchPerson"></el-input-number>
            </el-form-item>
            <el-form-item label="结束年龄" label-width="90px">
              <el-input-number v-model="filters.AgeTo" :min="0" :max="200" label="结束年龄" style="width:150px" @keyup.enter.native="searchPerson"></el-input-number>
            </el-form-item>
            <div style="width:78px;text-align:right;margin-bottom:10px;">计算日期</div>
            <el-form-item>
              <el-date-picker type="daterange" placeholder="选择日期" style="width:240px;margin-left:10px;" v-model="filters.AgeDate" value-format="yyyy-MM-dd" @keyup.enter.native="searchPerson"></el-date-picker>
            </el-form-item>
            <div style="font-size:16px !important;text-align:center;padding-bottom:15px">
              搜索结果中年龄按照计算日期计算
            </div>
          </div>

            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="searchPerson" style="margin-left:90px">查询人员</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      </el-scrollbar>
    </div>
    <div id="treebtn" @click="showtree()" :class="btnStyle"></div>
    <div id="deptdetail" :style="detailStyle">
      <div id="personSearchForm">
        <el-form :inline="true">
            <el-form-item>
              <el-button type="text" size="mini" @click="listSetting" icon="el-icon-setting">设置显示字段</el-button>
            </el-form-item>
        </el-form>
      </div>
      <h1 style="margin-top:0">
        {{loadingtext}}
      </h1>
      <el-table :data="personList" highlight-current-row v-loading="listLoading" style="width: 100%;" @sort-change='sortChange' :height="tableHeight" border>
        <el-table-column type="index" label=" " width="50" fixed align="center" class-name="tableth">
        </el-table-column>
        <el-table-column label="姓名" min-width="150" fixed>
          <template slot-scope="scope">
            <el-button size="small" @click="persondetail(scope.row.a0000)" type="text" icon="el-icon-search"><span style="color:#0058AC;font-weight:bolder">{{scope.row.a0101}}</span></el-button>
          </template>
        </el-table-column>
        <el-table-column prop="a0184" label="身份证号" min-width="200" v-if="in_array('身份证号', mycols)">
        </el-table-column>
        <el-table-column prop="a0192A" label="工作单位及职务" min-width="250" v-if="in_array('工作单位及职务', mycols)">
        </el-table-column>
        <el-table-column prop="a0192" label="工作单位及职务（简称）" min-width="250" v-if="in_array('工作单位及职务（简称）', mycols)">
        </el-table-column>
        <el-table-column prop="a0104" label="性别" min-width="50" v-if="in_array('性别', mycols)">
        </el-table-column>
        <el-table-column label="出生年月" min-width="150" v-if="in_array('出生年月', mycols)">
          <template slot-scope="scope">
            {{text2month(scope.row.a0107)}}
          </template>
        </el-table-column>
        <el-table-column prop="a0117" label="民族" min-width="100" v-if="in_array('民族', mycols)">
        </el-table-column>
        <el-table-column prop="a0111A" label="籍贯" min-width="100" v-if="in_array('籍贯', mycols)">
        </el-table-column>
        <el-table-column prop="a0114A" label="出生地" min-width="100" v-if="in_array('出生地', mycols)">
        </el-table-column>
        <el-table-column label="参加工作时间" min-width="150" v-if="in_array('参加工作时间', mycols)">
          <template slot-scope="scope">
            {{text2month(scope.row.a0134)}}
          </template>
        </el-table-column>
        <el-table-column label="入党时间" min-width="100" v-if="in_array('入党时间', mycols)">
          <template slot-scope="scope">
            {{text2month(scope.row.a0140)}}
          </template>
        </el-table-column>
        <el-table-column prop="qrzxl" label="最高全日制学历" min-width="150" v-if="in_array('最高全日制学历', mycols)">
        </el-table-column>
        <el-table-column prop="qrzxlxx" label="院校系专业" min-width="250" v-if="in_array('院校系专业（全日制学历）', mycols)">
        </el-table-column>
        <el-table-column prop="qrzxw" label="最高全日制学位" min-width="150" v-if="in_array('最高全日制学位', mycols)">
        </el-table-column>
        <el-table-column prop="qrzxwxx" label="院校系专业" min-width="250" v-if="in_array('院校系专业（全日制学位）', mycols)">
        </el-table-column>
        <el-table-column prop="zzxl" label="最高在职学历" min-width="150" v-if="in_array('最高在职学历', mycols)">
        </el-table-column>
        <el-table-column prop="zzxlxx" label="院校系专业" min-width="250" v-if="in_array('院校系专业（在职学历）', mycols)">
        </el-table-column>
        <el-table-column prop="zzxw" label="最高在职学位" min-width="150" v-if="in_array('最高在职学位', mycols)">
        </el-table-column>
        <el-table-column prop="zzxwxx" label="院校系专业" min-width="250" v-if="in_array('院校系专业（在职学位）', mycols)">
        </el-table-column>
        <!-- <el-table-column prop="" label="任现职务时间" min-width="150">
        </el-table-column> -->
        <el-table-column prop="a0221" label="职务层次" min-width="200" v-if="in_array('职务层次', mycols)">
        </el-table-column>
        <el-table-column label="任现职务层次时间" min-width="150" v-if="in_array('任现职务层次时间', mycols)">
          <template slot-scope="scope">
            {{text2month(scope.row.a0288)}}
          </template>
        </el-table-column>
        <el-table-column prop="a0192E" label="现职级" min-width="150" v-if="in_array('现职级', mycols)">
        </el-table-column>
        <el-table-column label="任现职级时间" min-width="150" v-if="in_array('任现职级时间', mycols)">
          <template slot-scope="scope">
            {{text2month(scope.row.a0192C)}}
          </template>
        </el-table-column>
        <el-table-column prop="a0120" label="级别" min-width="100" v-if="in_array('级别', mycols)">
        </el-table-column>
        <el-table-column prop="a0196" label="专业技术职务" min-width="200" v-if="in_array('专业技术职务', mycols)">
        </el-table-column>
        <el-table-column prop="a0122" label="专业技术类公务员任职资格" min-width="250" v-if="in_array('专业技术类公务员任职资格', mycols)">
        </el-table-column>
        <el-table-column prop="a0187A" label="专长" min-width="100" v-if="in_array('专长', mycols)">
        </el-table-column>
        <el-table-column prop="a0165" label="管理类别" min-width="100" v-if="in_array('管理类别', mycols)">
        </el-table-column>
        <el-table-column prop="a0160" label="人员类别" min-width="200" v-if="in_array('人员类别', mycols)">
        </el-table-column>
        <el-table-column prop="a0121" label="编制类型" min-width="200" v-if="in_array('编制类型', mycols)">
        </el-table-column>
        <el-table-column label="公务员登记时间" min-width="150" v-if="in_array('公务员登记时间', mycols)">
          <template slot-scope="scope">
            {{text2month(scope.row.a2949)}}
          </template>
        </el-table-column>
        <el-table-column label="是否两年以上基层工作经历" min-width="250" v-if="in_array('是否两年以上基层工作经历', mycols)">
          <template slot-scope="scope">
            {{int2sf(scope.row.a0197)}}
          </template>
        </el-table-column>
        <el-table-column prop="a0128" label="健康状况" min-width="100" v-if="in_array('健康状况', mycols)">
        </el-table-column>
        <el-table-column prop="a0163" label="人员管理状态" min-width="150" v-if="in_array('人员管理状态', mycols)">
        </el-table-column>
        <el-table-column prop="zgxl" label="最高学历" min-width="100" v-if="in_array('最高学历', mycols)">
        </el-table-column>
        <el-table-column prop="zgxlxx" label="最高学历学校" min-width="200" v-if="in_array('最高学历学校', mycols)">
        </el-table-column>
        <el-table-column prop="zgxw" label="最高学位" min-width="100" v-if="in_array('最高学位', mycols)">
        </el-table-column>
        <el-table-column prop="zgxwxx" label="最高学位学校" min-width="200" v-if="in_array('最高学位学校', mycols)">
        </el-table-column>
        <el-table-column prop="a0195" label="统计关系所在单位" min-width="250" v-if="in_array('统计关系所在单位', mycols)">
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination :disabled="!paginationshow" :total="totalnum" :current-page="pageNum" :page-size="pageSize" @current-change="handleCurrentChange" @size-change="handleSizeChange" :page-sizes="[10, 20, 30, 50]" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import personInfo from '@/person/Detail.vue'
const colslist = ['身份证号', '工作单位及职务', '工作单位及职务（简称）', '性别', '出生年月', '民族', '籍贯', '出生地', '参加工作时间', '入党时间', '最高全日制学历', '院校系专业（全日制学历）', '最高全日制学位', '院校系专业（全日制学位）', '最高在职学历', '院校系专业（在职学历）', '最高在职学位', '院校系专业（在职学位）', '职务层次', '任现职务层次时间', '现职级', '任现职级时间', '级别', '专业技术职务', '专业技术类公务员任职资格', '专长', '管理类别', '人员类别', '编制类型', '公务员登记时间', '是否两年以上基层工作经历', '健康状况', '人员管理状态', '最高学历', '最高学历学校', '最高学位', '最高学位学校', '统计关系所在单位']
export default {
  components: {
    personInfo
  },
  watch: {
    filterText (val) {
      this.$refs.tree2.filter(val)
      console.log(val)
    }
    // $refs.tree2.getCurrentNode()
  },
  data () {
    return {
      getPersonType: false, // false为树调用，true为搜索
      paginationshow: false,
      checkAll: true,
      isIndeterminate: false,
      cols: colslist,
      mycols: colslist,
      personInfo: {},
      myprops: {
        isLeaf: 'isLeaf'
      },
      filters: {
        AgeFrom: '',
        AgeTo: '',
        AgeDate: [],
        deptname: '',
        personname: '',
        idcard: ''
      },
      listLoading: false,
      mydeptid: '',
      treeVisible: true,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      treeShow: true,
      value1: true,
      filterText: '',
      treedata: [],
      mydeptnode: {},
      TreeLoading: false,
      detailStyle: {
        margin: '0 0 0 280px',
        width: 'calc(100% - 290px)'
      },
      btnStyle: 'treebtn',
      post: [],
      totalnum: 0,
      total: 0,
      pageNum: 1,
      pageSize: 20,
      loadingtext: '选择左侧树中节点查看详细信息',
      personList: [],
      tableHeight: 100,
      personDetailVisible: false,
      activeName: 'rmspb',
      colshow1: true,
      childdata: [],
      defaultkey: [],
      treeActiveName: 'jigou',
      personId: '',
      colSetVisible: false,
      changeSizeFlag: false,
      changeLogSizeFlag: false,
      ageItemChecked: false,
      AgeItemVisible: false,
      updateLogText: {}
    }
  },
  methods: {
    showAgeItem () {
      this.AgeItemVisible = this.ageItemChecked
    },
    in_array (searchString, array) {
      for (let i = 0; i < array.length; i++) {
        if (searchString === array[i]) return true
      }
      return false
    },
    handleCheckAllChange (val) {
      this.mycols = val ? this.cols : []
      this.isIndeterminate = false
      localStorage.setItem('defaultcols', JSON.stringify(this.mycols))
    },
    handleCheckedColsChange (value) {
      let checkedCount = value.length
      this.checkAll = checkedCount === this.cols.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cols.length
      localStorage.setItem('defaultcols', JSON.stringify(this.mycols))
    },
    listSetting () {
      this.colSetVisible = true
    },
    handleSizeChange (val) {
      this.changeSizeFlag = true
      this.pageNum = 1
      this.pageSize = val
      this.getPerson()
    },
    handleCurrentChange (val) {
      if (this.changeSizeFlag === false) {
        this.pageNum = val
        this.getPerson()
      }
    },
    showtree () {
      if (this.treeShow) {
        this.treeShow = false
        this.detailStyle.margin = '0 0 0 10px'
        this.detailStyle.width = 'calc(100% - 20px)'
        this.btnStyle = 'treebtn1'
      } else {
        this.treeShow = true
        this.detailStyle.margin = '0 0 0 280px'
        this.detailStyle.width = 'calc(100% - 290px)'
        this.btnStyle = 'treebtn'
      }
    },
    TreeBtnsShow () {
      console.log(this.treeVisible)
      this.treeBtnsVisible = this.treeVisible
    },
    editshow () {
      console.log(this.value1)
    },
    testf: function () {
      if (this.$refs.tree2.getCurrentNode()['id'] !== '0') {
        console.log('监听' + this.$refs.tree2.getCurrentNode()['id'])
        console.log('监听2' + this.$refs.tree2.getCurrentNode()['label'])
        this.mydeptid = this.$refs.tree2.getCurrentNode()['id']
        this.pageNum = 1
        this.getPersonType = false
        this.getPerson()
        this.setheight(this)
        this.mydeptnode = this.$refs.tree2.getCurrentNode()
        this.loadingtext = '正在加载中，请稍后...'
      // this.$router.push({path: `/dept/Detail/${this.$refs.tree2.getCurrentNode()['id']}`})
      }
    },
    handleNodeClick (data) {
      console.log(data)
      console.log(this.$refs.tree2.getCurrentKey())
      console.log(this.$refs.tree2.getCurrentNode()['label'])
    },
    filterNode (value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    renderContent (h, { node, data, store }) {
      console.log('测试：' + this.value1)
      return (
        <span class="custom-tree-node" style="width:100%" title={data.title} >
          <i class={data.className} />
          <span style="line-height:28px">{node.label}</span>
        </span>
      )
    },
    loadNode1 (node, resolve) {
      if (node.level === 0) {
        this.getChild(-1, resolve)
      } else {
        this.getChild(node.data.id, resolve)
      }
    },
    getChild (id, resolve) {
      console.log('重新获取树')
      console.log(this.childdata)
      var _this = this
      this.TreeLoading = true
      this.$http
        .get('/binfo/ins/' + id + '/true')
        .then(function (response) {
          _this.TreeLoading = false
          console.log('获取成功111')
          console.log(response.data)
          _this.childdata = response.data
          console.log(_this.childdata)
          resolve(_this.childdata)
          if (id === -1 && response.data.length > 0) {
            _this.defaultkey.push(response.data[0].id)
          }
        })
        .catch(function (error) {
          console.log(error)
          _this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
        })
    },
    treefresh (data) {
      this.mydeptnode.children = data
    },
    treefreshname (data) {
      this.mydeptnode.label = data
      this.mydeptnode.title = data
    },
    getPerson () {
      let para = {}
      if (this.getPersonType === false) {
        para = {
          pageNum: this.pageNum,
          pageSize: this.pageSize
        }
      } else {
        if (this.ageItemChecked) {
          if (this.filters.AgeFrom > this.filters.AgeTo) {
            this.$message({
              message: '开始年龄不能大于结束年龄',
              type: 'error'
            })
            return
          }
          if (this.filters.AgeFrom === null || this.filters.AgeFrom === undefined) {
            this.$message({
              message: '开始年龄不能为空',
              type: 'error'
            })
            return
          }
          if (this.filters.AgeTo === null || this.filters.AgeTo === undefined) {
            this.$message({
              message: '结束年龄不能为空',
              type: 'error'
            })
            return
          }
          if (this.filters.AgeDate === []) {
            this.$message({
              message: '计算日期不能为空',
              type: 'error'
            })
            return
          }
          para = {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            unitName: this.filters.deptname,
            personName: this.filters.personname,
            idCard: this.filters.idcard,
            ageFrom: this.filters.AgeFrom,
            ageTo: this.filters.AgeTo,
            ageDate: this.filters.AgeDate[1]
          // Sortkey: this.Sortkey,
          // Isace: this.Isace
          }
          if (this.filters.AgeDate[0] !== this.filters.AgeDate[1]) {
            para.ageDate0 = this.filters.AgeDate[0]
          }
        } else {
          para = {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            unitName: this.filters.deptname,
            personName: this.filters.personname,
            idCard: this.filters.idcard
          // Sortkey: this.Sortkey,
          // Isace: this.Isace
          }
        }
      }
      let url = ''
      if (this.getPersonType === false) {
        url = `/binfo/persons/` + this.mydeptid
      } else {
        url = '/binfo/persons/search'
      }
      var _this = this
      this.loadingtext = '正在加载中，请稍后...'
      this.deptlistLoading = true
      this.personList = []
      this.$http
        .post(url, para)
        .then(function (response) {
          _this.deptlistLoading = false
          _this.personList = response.data.list
          _this.totalnum = response.data.total
          if (_this.getPersonType === false) {
            _this.loadingtext = _this.$refs.tree2.getCurrentNode()['title'] + ' 人员列表'
          } else {
            _this.loadingtext = '搜索结果'
          }
          _this.changeSizeFlag = false
          _this.paginationshow = true
        })
        .catch(function (error) {
          console.log(error)
          _this.loadingtext = '网络获取失败'
          _this.$message({
            message: '网络获取失败',
            type: 'error'
          })
        })
    },
    searchPerson () {
      this.pageNum = 1
      this.getPersonType = true
      this.getPerson()
    },
    setheight (obj) {
      var clientHeight = 0
      if (document.body.clientHeight && document.documentElement.clientHeight) {
        clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      } else {
        clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      }
      obj.$nextTick(function () {
        obj.moreDetailStyle = 'height:' + (clientHeight - 210) + 'px'
        obj.tableHeight = clientHeight - 208
      })
    },
    // 排序
    sortChange: function (column, prop, order) {
      this.Sortkey = column.prop
      if (column.order === 'ascending') {
        this.Isace = true
      } else {
        this.Isace = false
      }
      this.getPerson()
    },
    persondetail (id) {
      this.personDetailVisible = true
      this.personId = id
    },
    getUpdatelog () {
      var _this = this
      this.$http
        .get('/dlog/status')
        .then(function (response) {
          _this.updateLogText = response.data
        })
        .catch(function (error) {
          _this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
        })
    }
  },
  mounted () {
    this.getUpdatelog()
    this.setheight(this)
    let _this = this
    window.onresize = function windowResize () {
      // 通过捕获系统的onresize事件触发我们需要执行的事件
      _this.setheight(_this)
      console.log('test0:' + _this.moreDetailStyle)
    }
    console.log('字段多少个？')
    console.log(JSON.parse(localStorage.getItem('defaultcols')).length)
    console.log('总计多少个？')
    console.log(this.mycols.length)
    if (localStorage.defaultcols.length > 0) {
      if (JSON.parse(localStorage.getItem('defaultcols')).length === this.mycols.length) {
        this.isIndeterminate = false
        this.checkAll = true
      } else {
        if (JSON.parse(localStorage.getItem('defaultcols')).length === 0) {
          this.checkAll = false
          this.isIndeterminate = false
        } else {
          this.checkAll = false
          this.isIndeterminate = true
        }
      }
      this.mycols = JSON.parse(localStorage.getItem('defaultcols'))
    } else {
      localStorage.setItem('defaultcols', JSON.stringify(colslist))
    }
  }
}
</script>
<style>
#tree i{
  padding-right:5px;
}
#tree {
  width: 260px !important;
  border:1px solid #95B8E7;
  height: calc(100% - 140px);
  background: #fff !important;
  padding-top:0;
  padding-right:0;
  margin-top:0;
  margin-left:10px;
  overflow: hidden;
  float: left;
  position: fixed;
}
.treebtn{
  background:url(../assets/hidetree.png) no-repeat;
  left:273px;
  width:7px;
  height:28px;
  position:fixed;
  top: calc(50%);
  cursor: pointer;
}
.treebtn1{
  background:url(../assets/showtree.png) no-repeat;
  left:3px;
  width:7px;
  height:28px;
  position:fixed;
  top: calc(50%);
  cursor: pointer;
}
#deptdetail{
  background: #fff;
  border:1px solid #95B8E7;
  height: calc(100% - 140px);
  float: left;
  position: fixed;
  padding:0 !important;
}
.el-tree{
  background: #fff;
}
.custom-tree-node {
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
#editswitch{
  margin: 15px;
  text-align: right;
  line-height: 20px;
  font-size: 14px;
}
.treeinputperson{
  width: 150px !important;
}
.deptbuttons{
  float:right;
}
#deptdetail .el-pagination{
  float: left;
  padding:7px 10px;
}
#deptdetail h1{
  height: 30px;
  border-bottom: 1px solid #95B8E7;
  font-family: '宋体';
  line-height: 30px;
  font-size: var(--size14) !important;
  color: #000;
  padding-left:10px;
  background-image: linear-gradient(to bottom , #EEF4FF, #E0ECFF);
  margin-bottom:0;
}
#personSearchForm{
  float:right;
  font-family: '宋体';
  padding-right:10px;
}
#personSearchForm .el-form-item__label{
  font-size:var(--size14) !important;
  line-height: 24px;
  padding-top: 3px;
}
#personSearchForm .el-input__inner{
  font-size:var(--size14) !important;
  line-height: 20px;
  height:30px;
  padding: 5px;
  border-radius: 0;
}
#personSearchForm .el-form-item{
  margin:0;
}
#personSearchForm .el-form-item__content{
  margin:0;
  line-height: 18px;
}
#personSearchForm .el-input__inner{
  padding:1px 5px;
  line-height: 16px;
  height: 25px;
  margin:3px 0;
}
#personSearchForm .el-button{
  border-radius: 0;
}
#deptdetail .el-tabs__header{
  height: 29px;
  background: #FAFAFA;
  line-height: 30px;
  font-family: '宋体';
  padding:0 20px;
  border-bottom: 2px solid #E4E7ED;
  margin:0;
}
#deptdetail .el-tabs__item{
  line-height: 30px;
  height: 30px;
  font-weight:bolder;
}
#deptdetail .mytable table{
  border-top: 1px solid #74A6CC;
  border-left: 1px solid #74A6CC;
  margin: 10px;
  width: calc(100% - 20px);
}
#deptdetail .mytable th,
#deptdetail .mytable td{
  padding: 10px;
  border-right: 1px solid #74A6CC;
  border-bottom: 1px solid #74A6CC;
  vertical-align:top;
  line-height: 150%;
}
#deptdetail .mytable th{
  background:#C0DCF1;
}
#deptdetail .el-table th{
    font-weight: normal;
    background-image: linear-gradient(to bottom , #f8f8f8, #efefef);
    height: 35px;
  }
#deptdetail .el-table td, .el-table th{
    padding:0;
    font-size:var(--size14) !important;
    line-height: 20px;
    font-family: '宋体'
  }
  .tableth{
    background-image: linear-gradient(to bottom , #f8f8f8, #efefef);
  }
.bztable{
  text-align: center
}
#deptdetail .bztable th{
  vertical-align:middle;
}
#deptdetail .detailinfotable th{
  width:140px;
}
.zhize{
  line-height: 200%;
}
#dept .el-dialog__body{
  padding-top:0;
}
#moreDetail{
  overflow: hidden;
}
.infotable{
  margin:0 20px 20px;
  font-size:14px;
  font-family: '宋体';
  border: 1px solid
}
#dept .el-dialog{
  overflow: hidden;
}
#dept .el-dialog__body{
  overflow: hidden;
}
#treetabs .el-tabs__item{
  background-color: #F5F7FA;
  border-bottom:1px solid #E4E7ED;
  font-size:16px !important;
}
#treetabs .is-active{
  background-color:#fff !important;
  border-bottom:1px solid #fff;
  font-weight: bolder;
  font-size:18px !important;
}
#dept .el-breadcrumb{
  padding-bottom:4px;
}
</style>
